@import '../../mixins';
@import '../../variables';

.our-sponsors {
	.our-sponsors-content-wrapper {
		margin-top: 40px;

		h3 {
			font-weight: 400;
			width: calc(100% - 30px);
			text-align: center;
			border-bottom: 2px solid #e5efef;
			line-height: 0;
			margin: 40px 15px;
			color: #a1b4b4;
			text-transform: uppercase;

			span {
				background: #fff;
				padding: 0 20px;
			}
		}

		.our-sponsors-sponsor {
			border: 2px solid #e4eaea;
			text-align: center;
			padding: 20px 30px;
			margin: 0 15px 25px;

			@media (max-width: @screen-xs-max) {
				padding: 20px 15px;
				margin: 0 0 25px;
			}

			@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
				margin: 0 0 25px;
			}

			&:hover {
				border-color: #b2cccb;
			}

			.our-sponsors-logo {
				img {
					margin: auto;
				}
			}

			p {
				line-height: 2;
			}

			a {
				color: #799d9c;
				.text-decoration(none);

				&:hover, &:focus {
					color: #eb4c36;
				}
			}
		}

		.our-sponsors-platinum {
			.our-sponsors-sponsor {
				height: 500px;

				.our-sponsors-logo {
					height: 160px;
					line-height: 160px;
				}

				p {
					height: 240px;
				}
			}
		}

		.our-sponsors-gold {
			.our-sponsors-sponsor {
				height: 300px;

				.our-sponsors-logo {
					height: 120px;
					line-height: 120px;
				}

				p {
					height: 80px;
				}
			}
		}

		.our-sponsors-bronze {
			.our-sponsors-sponsor {
				height: 170px;

				.our-sponsors-logo {
					height: 130px;
					line-height: 130px;
				}
			}
		}

		.our-sponsors-become-a-sponsor {
			background-color: #f8f2dc;
			border: 2px solid #ede9da;
			margin: 25px 15px;
			padding: 30px;
			font-size: 30px;
			text-align: center;

			span {
				font-size: 16px;
				display: inline-block;
				margin-left: 20px;
			}
		}
	}

	.media-mentions {
		position: absolute;
		background-color: #f8fbfb;
		border-left: 2px solid #e5ebeb;
		width: calc((100% - 100px) * 9 / 24);
		height: 100%;
		right: 0;
		top: 0;
		padding: 50px 40px 0 60px;

		ul {
			list-style: none;
			padding-left: 0;

			li {
				margin-top: 40px;

				&:before {
					font-family: FontAwesome;
					content: '\f0f6';
					margin-right: 25px;
					font-size: 40px;
					color: #cbd3d6;
				}

				.media-mention-title {
					font-size: 16px;
					display: block;
					margin-top: -53px;
					margin-left: 60px;
				}

				.media-mention-link {
					margin-top: 5px;
					margin-left: 60px;
				}
			}
		}
	}
}
